import { NodeSize } from '../config'

export default function xmlOutput(flow) {
  flow.register('XmlOutput', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M134.92419 287.768381l155.745524-0.024381V133.485714h-46.34819v75.166476L116.97981 81.286095 84.21181 114.029714l127.366095 127.414857H134.92419z'
            }
          ),
          h(
            'path',
            {
              fill: '#DBF3DB',
              d: 'M732.306286 810.008381l-1.414096-491.349333h-103.789714V214.844952h-165.936762l-160.256 160.231619v434.93181h431.396572z m-115.980191-363.398095h21.601524v111.762285h54.832762v19.870477h-76.434286v-131.632762z m-148.870095 0h25.063619l34.596571 92.818285 34.620953-92.818285h25.039238l4.559238 131.632762h-21.065143l-2.194286-91.404191-28.086857 75.093333h-25.697523l-28.111239-75.093333-2.194285 91.404191h-21.040762l4.510476-131.632762z m-125.610667 0h23.722667l29.891048 47.055238 30.037333-47.055238h23.722667l-41.520762 64.853333 42.861714 66.779429h-23.722667l-31.378285-48.981334-31.207619 48.981334h-23.722667l42.666667-66.779429-41.350096-64.853333z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M772.33981 318.902857l-41.667048-41.667047h-62.122667V215.113143l-41.691428-41.691429h-124.269715l-41.423238 41.423238h165.936762v103.814096h103.789714l1.414096 491.349333H300.909714V375.076571l-41.447619 41.472v434.907429h514.413715z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M364.227048 578.243048l31.207619-48.956953 31.402666 48.956953h23.698286l-42.861714-66.779429 41.545143-64.853333h-23.722667l-30.061714 47.055238-29.866667-47.055238h-23.722667l41.350096 64.853333-42.666667 66.779429zM486.15619 486.838857l28.111239 75.117714h25.697523l28.111238-75.117714 2.194286 91.404191h21.065143l-4.559238-131.632762H561.737143l-34.620953 92.818285-34.596571-92.818285h-25.063619l-4.534857 131.632762h21.040762zM692.760381 558.372571h-54.832762v-111.762285h-21.601524v131.632762h76.434286z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'Xml输出'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
